
"use client";

import { useEffect, useState } from 'react';
import { getPostBySlug, Post, deletePost } from '@/lib/posts';
import { notFound, useParams, useRouter } from 'next/navigation';
import { Badge } from '@/components/ui/badge';
import { Calendar, Tag, ArrowLeft, PenSquare, Trash2 } from 'lucide-react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { PostContentClient } from '@/components/post-content-client';
import { Skeleton } from '@/components/ui/skeleton';
import { useToast } from '@/hooks/use-toast';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"


export default function PostPage() {
  const params = useParams();
  const router = useRouter();
  const { toast } = useToast();
  const slug = params.slug as string;
  const [post, setPost] = useState<Post | null | undefined>(undefined);

  useEffect(() => {
    if (slug) {
      const foundPost = getPostBySlug(slug);
      setPost(foundPost);
    }
  }, [slug]);

  const handleDelete = () => {
    if (post?.slug) {
      deletePost(post.slug);
      toast({
        title: '成功',
        description: '文章已删除。',
      });
      router.push('/');
    }
  };

  if (post === undefined) {
    return (
      <div className="max-w-4xl mx-auto">
        <Skeleton className="h-12 w-1/4 mb-8" />
        <Skeleton className="h-16 w-3/4 mb-4" />
        <div className="flex gap-4 mb-8">
          <Skeleton className="h-6 w-1/3" />
          <Skeleton className="h-6 w-1/2" />
        </div>
        <Skeleton className="h-96 w-full" />
      </div>
    );
  }

  if (!post) {
    notFound();
  }

  return (
    <article className="max-w-4xl mx-auto bg-card p-6 sm:p-8 md:p-12 rounded-2xl shadow-lg">
      <header className="mb-8 border-b pb-8">
        <div className="flex justify-between items-center mb-6">
          <Button variant="ghost" asChild>
            <Link href="/">
              <ArrowLeft className="mr-2 h-4 w-4" />
              返回
            </Link>
          </Button>
          {post.isLocal && (
             <div className="flex items-center gap-2">
                <Button variant="outline" asChild>
                    <Link href={`/edit/${post.slug}`}>
                    <PenSquare className="mr-2 h-4 w-4" />
                    编辑
                    </Link>
                </Button>
                <AlertDialog>
                  <AlertDialogTrigger asChild>
                    <Button variant="destructive">
                      <Trash2 className="mr-2 h-4 w-4" />
                      删除
                    </Button>
                  </AlertDialogTrigger>
                  <AlertDialogContent>
                    <AlertDialogHeader>
                      <AlertDialogTitle>确定要删除吗？</AlertDialogTitle>
                      <AlertDialogDescription>
                        此操作无法撤销。这将永久删除您的文章。
                      </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                      <AlertDialogCancel>取消</AlertDialogCancel>
                      <AlertDialogAction onClick={handleDelete}>确定</AlertDialogAction>
                    </AlertDialogFooter>
                  </AlertDialogContent>
                </AlertDialog>
             </div>
          )}
        </div>
        <h1 className="font-headline text-4xl md:text-5xl font-bold tracking-tight text-primary-foreground mb-4">
          {post.title}
        </h1>
        <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-muted-foreground">
          <div className="flex items-center space-x-2">
            <Calendar className="h-5 w-5" />
            <span>发布于 {post.publishedDate}</span>
          </div>
          <div className="flex items-center space-x-2">
             <Tag className="h-5 w-5" />
            <div className="flex flex-wrap gap-2">
              {post.tags.map((tag) => (
                <Badge key={tag} variant="secondary" className="font-normal">{tag}</Badge>
              ))}
            </div>
          </div>
        </div>
      </header>
      
      <PostContentClient content={post.content} />

    </article>
  );
}
